<template>
	<view class="comments">
	    <view class="comments-view" @click="goodsComments">
	        <view class="left-view">
	            <text class="bold-text" v-if="commentsList && commentsList.length">评价</text>
	            <text class="bold-text" v-else>暂无评价</text>
	        </view>
	        <view class="content-view u-margin-left-20"></view>
	        <view class="right-view">
                <text class="grade-text">好评率：{{grade}}%</text>
	            <u-icon class="collection-icon" name="arrow-right" size="30"></u-icon>
	        </view>
	    </view>
	    <view class="goods-comments" v-if="commentsList && commentsList.length">
	        <view class="comments-info u-m-b-20" v-for="(comment, index) in commentsList" :key="index" v-if="index < 2">
	            <view class="u-flex">
	                <view class="u-m-r-26">
	                    <u-image width="70" height="70rpx" shape="circle" :src="comment.member_face"></u-image>
	                </view>
	                <view>
	                    <view class="member-name">{{ comment.member_name }}</view>
                        <view class="grade">{{ comment.grade | filterGrade }}</view>
	                    <!-- <u-icon class="u-m-r-4 u-font-10" name="star-fill" color="#f42424" v-for="(star, starIndex) in comment.grade" :key="starIndex"></u-icon> -->
	                </view>
	            </view>
	            <view class="u-m-20">
	                <view class="u-m-b-20 u-line-5">{{ comment.content }}</view>
	                <view class="u-flex u-flex-wrap" v-if="comment.images">
                        <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comment.images" :key="imgIndex">
                            <u-image width="200" height="200" :src="img" @click="handlePreviewImage(comment.images, imgIndex)"></u-image>
                        </view>
	                </view>
	            </view>
	            <view class="reply-info u-m-20" v-if="comment.reply_status === 1 && comment.reply">
	                <text>商家回复：</text>
	                <view class="u-line-5">{{ comment.reply.content }}</view>
	            </view>
	            <u-line color="#f3f4f6" />
	        </view>
	    </view>
	    <view class="u-flex u-row-center u-padding-bottom-20" v-if="commentsList && commentsList.length">
	        <text class="comment-btn" @click="goodsComments">查看全部评价</text>
	    </view>
	</view>
</template>

<script>
    /**
     * 商品详情页评价组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     * ===== 参数 =====
     * goodsId        商品ID
     * grade          商品好评率
     */
    import * as API_Members from '@/api/members.js'
	export default {
		data() {
			return {
                params: {
                    page_no: 1,
                    page_size: 10
                },
                commentsList: []
			};
		},
        props: {
            goodsId: {
                type: String,
                default: ''
            },
            grade: {
                type: Number,
                default: 100
            }
        },
        filters: {
              /** 评分 */
              filterGrade(val) {
                switch (val) {
                  case 'bad':
                    return '差评'
                  case 'neutral':
                    return '中评'
                  default:
                    return '好评'
                }
              }
            },
        mounted() {
            setTimeout(() => {
                this.getGoodsComments()
            },1000)
        },
        methods: {
            //图片预览
            handlePreviewImage(index, image) {
                uni.previewImage({
                    current: index,
                    urls: image
                })
            },
            //商品评价
            goodsComments() {
                this.navigateTo(`/goods-module/goods-comments?goods_id=${this.goodsId}`)
            },
            //商品评价列表
            getGoodsComments() {
                API_Members.getGoodsComments(this.goodsId, this.params).then(response => {
                    const { data } = response
                    this.commentsList = this.commentsList.concat(data)
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
    .comments {
        border-radius: 15rpx;
        margin-top: 23rpx;
        background-color: #FFFFFF;
        .comment-img {
            border-radius: 10rpx;
            overflow: hidden;
        }
        .comments-view {
            padding: 30rpx;
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;
            .left-view {
                margin-right: 20rpx;
            }
            .right-view {
                .grade-text {
                    color: #606266;
                    font-size: 24rpx;
                }
            }
            .content-view {
                flex: 1;
            }
        }
        .goods-comments {
            background-color: #FFFFFF;
            padding: 20rpx 30rpx;
            .grade-time-info, .reply-info {
                color: #999999;
                font-size: 24rpx;
            }
            .comments-info {
                .member-name {
                    font-size: 31rpx;
                }
                .grade {
                    color: #909399;
                    font-size: 25rpx;
                }
            }
        }
        //加粗字体
        .bold-text {
            font-weight: bold;
        }
    }
</style>
